<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单输入绑定</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="input1" placeholder="edit me"/><span>{{input1}}</span><br>
    <template v-for="(item,index) in radios">
        <input type="radio"  v-bind:value="item.key" v-bind:id="'radio' + index"  v-model="checked" /><label v-bind:for="'radio' + index">{{item.value}}</label>
    </template><br>
    <span>业余活动为：{{checked}}</span><br>

    <label>编程语言:</label>
    <select v-model="optSel">
        <template v-for="(item,index) in radios">
            <option v-bind:value="item.key">{{item.value}}</option>
        </template>
    </select><br>
    <label>已选中语言:{{optSel}}</label><br>


    <form></form>
</div>
<script>
    var vm = new Vue({
       el:"#app",
        data:{
            input1:'input1',
            radios:[{key:1,value:'学习'},{key:2,value:'编程'},{key:3,value:'阅读'}],
            checked:1,
            options:[{key:1,value:'java'},{key:2,value:'c++'},{key:3,value:'vue'}],
            optSel:1
        }

    });
</script>
</body>
</html>